<template>
<div>
  <h3>房产经纪</h3>
<div class="bigbox" v-for="item in list" :key="item.id">
  <div class="left">
    <div class="image">
     <img class="imgdd" :src="item.image" alt="">
      </div>
   <div id="lineRight"></div>
  </div>
  <div class="right">
  <p >{{item.name}}</p>
<div class="desc">{{item.desc}}</div>
  </div>
</div>

</div>
</template>

<script>
import {getAgetList} from '@/api/agets'
export default {
  data() {
      return {
      list:[]
      }
    },
    created () {
      this.getAgetList()
    } ,
    methods: {
    async  getAgetList(){
    const res =await getAgetList()
   
    this.list=res.data
     console.log(this.list);
      }
    }
}
</script>

<style  scoped>
.bigbox{
  margin: 0 auto;
  border: 1px solid #ccc;
  width: 1000px;
  height: 200px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.left{
  height: 100%;
  width: 400px;
  position:relative
}
 .image{
  width: 200px;
  height: 80%;
   margin-left: 50px;
   margin-top: 18px;
  }
  .imgdd{
    width: 100%;
    height: 100%;
  }
#lineRight::after {
 position: absolute;
 content: "";
 width: 1px;
 height: 80%;
 position: absolute;
 top: 10px;
 left: 80%;
 margin: auto;
 padding-top: 20px;
background: #ccc;
}
.right{
  width: 600px;
   height: 100%;
}

</style>
